<template>
	
	<div id="edit-model-wrap-bottom" class="edit-model-wrap-bottom" v-show="isShow" :style="{ height: height + 'px' }">
		<button class="resize-button" @click="OnResizeClick">
			<el-icon>
				<ArrowRightBold v-show="isExpand" />
				<ArrowLeftBold v-show="!isExpand" />
			</el-icon>
		</button>
		<div class="split-directive-bar" @mousedown="dragEagle">
		</div>
		
		<div class="panel">
			
			<div class="draw-tool-pane" style="width: 300px;">
				<div class="panel-header">
					<span style="border-left: 3px solid #0080ff;padding-left: 10px;margin-left: 10px;">场景</span>
					<div>
						<el-icon><FolderAdd /></el-icon>
					</div>
					
				</div>
				<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" >
				  <template #default="{ node, data }">
					<span class="custom-tree-node">
					  <span>{{ node.label }}</span>
					  <span>
						<a @click="append(data)"> 编辑 </a>
						<a style="margin-left: 8px" @click="remove(node, data)"> 删除 </a>
					  </span>
					</span>
				  </template>
				</el-tree>	
			</div>
			
			
			<div class="asset-pane">
				<div class="panel-header">
					<ul>
						<li>
							<span style="border-left: 3px solid #0080ff;padding-left: 10px;">对象列表</span>
						</li>
					</ul>
					<div class="tool-bar">
						<div class="input-asset-search">
							<input  type="text"/>
						</div>
						<div class="btn-asset-manage">
							<button>
								<div> <CopyDocument /></div>
								<span style="display: block;margin-left: 22px;">导入</span>
							</button>
						</div>
<!-- 						<div class="btn-asset-refresh">
							<button><el-icon><Refresh /></el-icon></button>
						</div> -->
					</div>
				</div>
				<div class="panel-body">
					<div class="asset-list">
						
						<div class="">
						  <el-table
							:data="tableData"
							:show-header="false"
							style="width: 100%"
							:row-class-name="tableRowClassName"
						  >
						    <el-table-column type="selection" width="55" />
							<el-table-column prop="date" label="名称" />
							<el-table-column label="Operations" width="200">
							  <template #default>
								  <ul class="oper">
									  <li>定位</li>
									  <li>可视</li>
									  <li>复制</li>
									  <li>锁定</li>
									  <li>删除</li>
								  </ul>
							  </template>
							</el-table-column>
						  </el-table>
						</div>
					</div>
				</div>
			</div>
<!-- 			<div class="draw-tool-pane">
				<div class="panel-header">
					<span  style="border-left: 3px solid #0080ff;padding-left: 10px;margin-left: 10px;">样式</span>
				</div>
				<el-table
					:data="tableDataForStyle"
					:show-header="false"
					style="width: 100%">
					<el-table-column label="Operations" width="100">
					  <template #default>
						  <img  src="../../../../assets/images/poi.webp" style="width: 50px;height: 35px;" />
					  </template>
					</el-table-column>
					
					<el-table-column prop="address" label="类型" />
					<el-table-column label="Operations" width="60">
					  <template #default>
						<el-button link type="primary" size="small">变更</el-button>
					  </template>
					</el-table-column>
				</el-table>
			</div> 
			 -->
			
			<div class="draw-tool-pane">
				<div class="panel-header">
					<span  style="border-left: 3px solid #0080ff;padding-left: 10px;margin-left: 10px;">绘制工具(操作为单选)</span>
				</div>
				<button style="margin-right: 5px;">单点绘制</button>
				<button>笔刷绘制</button>
			</div> 
			<div class="draw-tool-pane">
				<div class="panel-header">
					<span  style="border-left: 3px solid #0080ff;padding-left: 10px;margin-left: 10px;">绘制资产</span>
					<div style="margin-right: 5px;">
						<button style="font-size: 13px;margin-right: 5px;">资产库</button>
						<button style="font-size: 13px;">清空</button>
					</div>
				</div>
				<el-table
					:data="tableDataFoDraw"
					:show-header="false"
					style="width: 100%">
					<el-table-column label="Operations" width="100">
					  <template #default>
						  <img  src="../../../../assets/images/poi.webp" style="width: 50px;height: 35px;" />
					  </template>
					</el-table-column>
					
					<el-table-column prop="address" label="类型" />
					<el-table-column label="Operations" width="60">
					  <template #default>
						<el-button link type="primary" size="small">移除</el-button>
					  </template>
					</el-table-column>
				</el-table>
			</div> 
			
			
		</div>
	</div>
	
</template>

<script setup lang="ts">
	import {
	  ArrowRightBold,ArrowLeftBold,Menu,Back,ArrowRight,Refresh,CopyDocument,FolderAdd
	} from '@element-plus/icons-vue'
	import { ref } from 'vue'
	let paneHeight=288;
	const isExpand = ref(true)
	const isShow = ref(true)
	const height = ref(paneHeight)
	
	const OnResizeClick=()=>{
		if(height.value==paneHeight){
			isExpand.value=false
			height.value=0;
		}else{
			height.value=paneHeight;
			isExpand.value=true
		}
	}
	
	let type=1;
	const show=()=>{
		isShow.value=!isShow.value
	}

	const dragEagle= (e)=> {
		var targetDiv = document.getElementById('edit-model-wrap-bottom'); 
		var targetDivHeight = targetDiv.offsetHeight;
		var startX = e.clientX;
		var startY = e.clientY;
		document.onmousemove  = function (e) {
			e.preventDefault();
			var distY = Math.abs(e.clientY - startY);
			//往上方拖动：
			if (e.clientY < startY) {
				targetDiv.style.height = targetDivHeight + distY + 'px';
			}
			//往下方拖动：
			if (e.clientX < startX && e.clientY > startY) {
				targetDiv.style.height = (targetDivHeight - distY) + 'px';
			}
			if (parseInt(targetDiv.style.height) >= 500) {
				targetDiv.style.height = 500 + 'px';
			}
			if (parseInt(targetDiv.style.height) <= 288) {
				targetDiv.style.height = 288 + 'px';
			}
		}
		// 鼠标松开事件
		document.onmouseup = function (evt) {
			document.onmousemove = null;
			document.onmouseup = null;
		};
	}
	
	onMounted(()=>{
	})
	
	defineExpose({
	  show
	});
	
	interface User {
	  date: string
	  name: string
	  address: string
	}
	
	const tableRowClassName = ({
	  row,
	  rowIndex,
	}: {
	  row: User
	  rowIndex: number
	}) => {
	  if (rowIndex === 1) {
	    return 'warning-row'
	  } else if (rowIndex === 3) {
	    return 'success-row'
	  }
	  return ''
	}
	
	const tableData: User[] = [
	  {
	    date: '2016-05-04',
	    name: 'Tom',
	    address: 'No. 189, Grove St, Los Angeles',
	  },
	  {
	    date: '2016-05-01',
	    name: 'Tom',
	    address: 'No. 189, Grove St, Los Angeles',
	  },
	  {
	    date: '2016-05-01',
	    name: 'Tom',
	    address: 'No. 189, Grove St, Los Angeles',
	  },
	  {
	    date: '2016-05-01',
	    name: 'Tom',
	    address: 'No. 189, Grove St, Los Angeles',
	  },
	  {
	    date: '2016-05-01',
	    name: 'Tom',
	    address: 'No. 189, Grove St, Los Angeles',
	  }
	  
	]
	
	const tableDataForStyle: User[] = [
	  {
	    date: '只能抓拍摄像头',
	    name: 'Tom',
	    address: 'POI_Screen',
	  },
	  {
	    date: '2016-05-02',
	    name: 'Tom',
	    address: 'POI_3D',
	  },
	]
	
	const tableDataFoDraw: User[] = [
	  {
	    date: '只能抓拍摄像头',
	    name: 'Tom',
	    address: 'POI_Screen',
	  },
	]
	
	
	interface Tree {
	  label: string
	  children?: Tree[]
	}
	
	const handleNodeClick = (data: Tree) => {
	  console.log(data)
	}
	
	const data: Tree[] = [
	  {
	    label: 'Level one 1',
	    children: [
	      {
	        label: 'Level two 1-1',
	        children: [
	          {
	            label: 'Level three 1-1-1',
	          },
	        ],
	      },
	    ],
	  },
	  {
	    label: 'Level one 2',
	    children: [
	      {
	        label: 'Level two 2-1',
	        children: [
	          {
	            label: 'Level three 2-1-1',
	          },
	        ],
	      },
	      {
	        label: 'Level two 2-2',
	        children: [
	          {
	            label: 'Level three 2-2-1',
	          },
	        ],
	      },
	    ],
	  },
	  {
	    label: 'Level one 3',
	    children: [
	      {
	        label: 'Level two 3-1',
	        children: [
	          {
	            label: 'Level three 3-1-1',
	          },
	        ],
	      },
	      {
	        label: 'Level two 3-2',
	        children: [
	          {
	            label: 'Level three 3-2-1',
	          },
	        ],
	      },
	    ],
	  },
	]
	const defaultProps = {
	  children: 'children',
	  label: 'label',
	}
	
	
	
</script>

<style  scoped>
	
	.custom-tree-node {
	  flex: 1;
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  font-size: 14px;
	  padding-right: 8px;
	}
	
	.oper{
		>li{
			list-style: none;
			float: left;
			margin-left: 0.3125rem;
			>img{
				width: 20px;
				height: 20px;
			}
		}
	}
	
	
	.el-table {
	    background-color: #272729;
	}
	
	.el-table__row {
		background-color: #272729 !important;
	}
	
	.el-table > tr {
		background-color: #272729 !important;
	}
	
	.edit-model-wrap-bottom{
			height: 18rem;
			background: #272729;
			position: relative;
			border-top: 1px solid #424653;
			>.resize-button {
			    position: absolute;
			    cursor: pointer;
			    padding: 1px;
			    border: 1px solid #0080ff;
			    color: #d4d4d4;
			    border-radius: inherit;
			    font-size: 12px;
			    -webkit-box-sizing: border-box;
			    box-sizing: border-box;
			    background: -webkit-gradient(linear,right top,left top,from(rgba(21,98,240,.45)),to(rgba(14,31,58,.45)));
			    background: linear-gradient(270deg,rgba(21,98,240,.45),rgba(14,31,58,.45));
			    height: 41px;
			    width: 17px;
				
				left: 50%;
				top: 8px;
				-webkit-transform: rotate(90deg) translate(-222%,22%);
				transform: rotate(90deg) translate(-222%,22%);
			}
			
			.split-directive-bar{
				left: 0;
				width: 100%;
				cursor: ns-resize;
				height: 0.5rem;
				background: #2b2c2f;
				border-top: 1px solid rgb(24, 24, 27);
				border-bottom: 1px solid rgb(24, 24, 27);
				
				background-image: url("/src/assets/icons/shenglvehao.svg");
				background-position-y: center;
				background-repeat: no-repeat;
				background-position-x: center;
				background-size: 25px;
			}
			
			>.panel{
				display: -webkit-flex;
				display: flex;
				-webkit-flex-direction: row;
				flex-direction: row;
				height: 100%;

				>.asset-pane{
					flex: 1;
					border-right: 1px solid #18181b;
					background-color: #313235;
					>.panel-header{
						height: 33px;
						background: #36373a;
						margin-bottom: 1px;
						border-top: 0rem;
						border-left: 0rem;
						border-right:  0rem;
						padding-top: 3px;
 						display: flex;
						-webkit-flex-direction: row;
						flex-direction: row;
						>ul{
							margin-top: 0.3125rem;
							flex: 0.5; 
							margin-left: 0.3125rem; 
							overflow: auto;
							>li{
								list-style: none;
								float: left;
								cursor: pointer;
								color: #ccc;
								font-size: 0.875rem;
								padding-left: 0.3125rem;
								>div{
									width: 1.25rem;
									width: 1.25rem;
								}
								>.arrow-i{
									width: 1.0625rem;
									font-size: 1rem;
								}
							}
						}
						>.tool-bar{
							flex: 0.5; 
		 					text-align: right;
 							display: flex;
							-webkit-flex-direction: row;
							flex-direction: row; 
							>.input-asset-search{
								flex: 1;
								margin-right: 0.625rem;
								height: 2.1875rem;
								margin-top: -1px;
								>input[type=text]{
									background: #1f2632;
									border: 1px solid #4d505e;
									border-radius: 0.9375rem;
									outline-style: none ;
									caret-color:#0080ff;
									height: 1.625rem;
									color: #ccc;
									width: 17.5rem;
									padding-left: 1.125rem;
									padding-right: 1.125rem;
									background-image: url('../../../../assets/icons/search.svg');
									
									background-size: 1.375rem;
									background-repeat: no-repeat;
									background-position-y: center;
									background-position-x: 15.625rem;
								}
								>input[type=text]:focus {
									border: px solid #0080ff;
								}
							}
							>.btn-asset-manage{
								width: 112px;
								margin-right: 3px;
								>button{
									width: 112px;
									height: 1.625rem;
									border: 1px solid #4d505e;
									background: transparent;
									color: #ccc;
									>div{
										width: 15px;
										position: absolute;
										margin-top: 2px;
										margin-left: 0.625rem;
									}
								}
							}
							>.btn-asset-refresh{
								width: 1.875rem;
								padding: 0.125rem;
								margin-right: 0.4375rem;
								margin-top: 1px;
								>button{
									background: transparent;
									color: #ccc;
									font-size: 1.25rem;
								}
							}
							
						}
						
						>span{
							font-size: 0.875rem;
							padding-left: 0.625rem;
							color: #ccc;
						}
					}
					>.panel-body{
						height: 100%;
						overflow: hidden;
						/* padding-bottom: 52px; */
						border-top: 1px solid #424653;
						display: flex;
						-webkit-flex-direction: row;
						flex-direction: row; 
						>.classify-nav{
							width: 15rem;
							border-right: 1px solid #18181b;
							height: 100%;
							
							.el-tree{
								border-bottom: 1px solid #515664;
								-webkit-box-flex: 1;
								-ms-flex: 1;
								flex: 1;
								background-color: #2d2d31;
								color: #ccc;
							}
							.el-tree-node{
								border-left: 2px solid transparent;
								background-color: #28292d;
								border-bottom: 1px solid #515664;
								padding-left: 12px;
							}
							
						}
						>.asset-list{
							flex: 1;
							width: 100%;
							padding-bottom: 3.25rem;
							overflow: auto;
							>ul{
								display: flow-root;
								position: relative;
								>li{
									list-style: none;
									float: left;
									cursor: pointer;
									color: #ccc;
									>div{
										height: 80px;
										width: 80px;
										border: 1px solid  #515664;
										margin: 10px 0px 0px 10px;
										>img{
											width: 100%;
											color: aqua;
										}
									}
								}
							}
						}
					}
				}
				>.draw-tool-pane{
					width: 300px;
					height: 100%;
					border-right: 1px solid #18181b;
					>.panel-header{
						height: 33px;
						background: #36373a;
						margin-bottom: 1px;
						border-top: 0rem;
						border-left: 0rem;
						border-right:  0rem;
						padding-top: 5px;
						>span{
							font-size: 0.875rem;
							padding-left: 0.625rem;
							color: #ccc;
						}
						>div{
							float: right;
							padding-right: 0.3125rem;
							padding-top: 3px;
							color: #ccc;
						}
					}
					
				}
				>.draw-asset-pane{
					width: 300px;
					height: 100%;
					border-right: 1px solid #18181b;
					>.panel-header{
						height: 33px;
						background: #36373a;
						margin-bottom: 1px;
						border-top: 0rem;
						border-left: 0rem;
						border-right:  0rem;
						padding-top: 5px;
						>span{
							font-size: 0.875rem;
							padding-left: 0.625rem;
							color: #ccc;
						}
					}
				}
			}
		
	}
	
	::-webkit-scrollbar {
		width: 0rem; /*对垂直流动条有效*/
		height: 0rem; /*对水平流动条有效*/
	}

	/*定义滚动条的轨道颜色、内阴影及圆角*/
	::-webkit-scrollbar-track{
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
		background-color: rosybrown;
		border-radius: 0px;
	}


   /*定义滑块颜色、内阴影及圆角*/
	::-webkit-scrollbar-thumb{
		border-radius: 0px;
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
		background-color: #E8E8E8;
	}

	/*定义两端按钮的样式*/
	::-webkit-scrollbar-button {
		display: none;
	}

	/*定义右下角汇合处的样式*/
   ::-webkit-scrollbar-corner {
		display: none;
	}
	
	/deep/ .el-table__body-wrapper tr td.el-table-fixed-column--left, .el-table__body-wrapper tr td.el-table-fixed-column--right, .el-table__body-wrapper tr th.el-table-fixed-column--left, .el-table__body-wrapper tr th.el-table-fixed-column--right, .el-table__footer-wrapper tr td.el-table-fixed-column--left, .el-table__footer-wrapper tr td.el-table-fixed-column--right, .el-table__footer-wrapper tr th.el-table-fixed-column--left, .el-table__footer-wrapper tr th.el-table-fixed-column--right, .el-table__header-wrapper tr td.el-table-fixed-column--left, .el-table__header-wrapper tr td.el-table-fixed-column--right, .el-table__header-wrapper tr th.el-table-fixed-column--left, .el-table__header-wrapper tr th.el-table-fixed-column--right {
	    background: #606475;
	}
	
	/deep/ .el-table__body-wrapper tr td.el-table-fixed-column--right, .el-table__body-wrapper tr th.el-table-fixed-column--left, .el-table__body-wrapper tr th.el-table-fixed-column--right, .el-table__footer-wrapper tr td.el-table-fixed-column--left, .el-table__footer-wrapper tr td.el-table-fixed-column--right, .el-table__footer-wrapper tr th.el-table-fixed-column--left, .el-table__footer-wrapper tr th.el-table-fixed-column--right, .el-table__header-wrapper tr td.el-table-fixed-column--left, .el-table__header-wrapper tr td.el-table-fixed-column--right, .el-table__header-wrapper tr th.el-table-fixed-column--left, .el-table__header-wrapper tr th.el-table-fixed-column--right {
	    background: #606475;
	}
	
	/deep/ .el-table__body-wrapper tr th.el-table-fixed-column--left, .el-table__body-wrapper tr th.el-table-fixed-column--right, .el-table__footer-wrapper tr td.el-table-fixed-column--left, .el-table__footer-wrapper tr td.el-table-fixed-column--right, .el-table__footer-wrapper tr th.el-table-fixed-column--left, .el-table__footer-wrapper tr th.el-table-fixed-column--right, .el-table__header-wrapper tr td.el-table-fixed-column--left, .el-table__header-wrapper tr td.el-table-fixed-column--right {
	    background: #606475;
	}
	
	/deep/ .el-table__header-wrapper tr th.el-table-fixed-column--left{
		 background-color: #3d3d41;
	}
	
	/deep/ .el-table__header-wrapper tr th.el-table-fixed-column--right{
		background: #1f2021;
	}
	
	/deep/ .el-table__body-wrapper tr td.el-table-fixed-column--right, .el-table__body-wrapper tr th.el-table-fixed-column--left[data-v-c23973b1], .el-table__body-wrapper tr th.el-table-fixed-column--right[data-v-c23973b1], .el-table__footer-wrapper tr td.el-table-fixed-column--left[data-v-c23973b1], .el-table__footer-wrapper tr td.el-table-fixed-column--right[data-v-c23973b1], .el-table__footer-wrapper tr th.el-table-fixed-column--left[data-v-c23973b1], .el-table__footer-wrapper tr th.el-table-fixed-column--right[data-v-c23973b1], .el-table__header-wrapper tr td.el-table-fixed-column--left[data-v-c23973b1], .el-table__header-wrapper tr td.el-table-fixed-column--right[data-v-c23973b1], .el-table__header-wrapper tr th.el-table-fixed-column--left[data-v-c23973b1], .el-table__header-wrapper tr th.el-table-fixed-column--right[data-v-c23973b1] {
	    background: #3d3d41;
	}
	
	/deep/ .el-table__inner-wrapper::before {
	    /* background-color: var(--el-table-border-color); */
		background-color:transparent;
	}
	
	/deep/ .el-table {
	    color: #ccc;
	}
	
	/deep/ .el-table th.el-table__cell{
	    background-color: #1f2021;
	}
	
	/deep/ .el-table thead {
	    font-weight: 500;
	}
	
	/deep/ .el-table tr {
	    background-color: #3d3d41;
	}
	
	/deep/.el-table th.el-table__cell.is-leaf {
	    /* border-bottom: var(--el-table-border); */
		border-bottom:  1px solid #606475;
	}
	
	/deep/.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
	    border-bottom:  1px solid #606475;
	}
	
	/* .el-table__body tr.hover-row.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped>td.el-table__cell, */
	/deep/.el-table__body tr.hover-row>td.el-table__cell{
		 background-color: #18222c;
	}
	
	/deep/.el-table__empty-text {
	    color: #ccc;
	}
	
	/deep/.el-table__empty-block {
	    background: #3d3d41;
	}
	
	/deep/.el-tree {
	    position: relative;
		background-color: transparent;
	    cursor: default;
	    color: #ccc;
	    font-size: var(--el-font-size-base);
	}
</style>